<template>
<div class="color-view">
    <div class="one">
        <MyTabsSlot
            class="tab-list"
            :activeIndex="activeIndex">
            <div
                :class="{
                    'item':true,
                    'active-item':activeIndex==index,
                }"
                v-for="(item,index) in optionList"
                :key="index"
                @click="activeIndex=index">
                {{item.title}}
            </div>
        </MyTabsSlot>
    </div>
    <div class="two">
        <div class="none" v-if="dataList.length <=0">
            <i class="el-icon-loading"></i>
        </div>
        <div class="content">
            <ColorItem 
                v-for="item in dataList" 
                :key="item.id"
                :itemData="item">
            </ColorItem>
        </div>
        <div class="bottom" v-if="queryParams.total>1">
            <Pagination
                :currentPage="queryParams.page"
                @currentChange="(e)=>{
                    queryParams.page = e;
                    getData();
                }"
                :pageSize="queryParams.size"
                :pageCount="queryParams.total">
            </Pagination>
        </div>
    </div>
    <div class="three">
        <Search
            :type="1">
        </Search>
    </div>
    <div class="four">
        <div class="title">
            你
            <span>
                <i class="el-icon-star-on"></i>
            </span>了
            <span>{{likeColorList.length}}</span>
            个<span>Color</span>!
        </div>
        <div class="content">
            <LikeColorItem 
                v-for="item in likeColorList" 
                :key="item.id"
                :itemData="item">
            </LikeColorItem>
        </div>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import MyTabsSlot from '@/components/MyTabsSlot';
import ColorItem from '@/components/color/ColorItem';
import LikeColorItem from '@/components/color/LikeColorItem';
import Search from '@/components/other/Search';
import Loading from '@/components/other/Loading';
import Pagination from '@/components/other/Pagination';
import {simpleRoll} from '@/common/RollTolls';
import {debounceFn} from "@/common/DebounceAndThrottle";
export default {
    name: 'Color',
    components: {
        MyTabsSlot,ColorItem,LikeColorItem,
        Search,Loading,Pagination,
    },
    data(){
        this.optionList = [
            {title:'最新',value:'new'},
            {title:'Like最多',value:'like'},
        ];
        return{
            loading:false,
            activeIndex:0,  //当前选择的索引
            queryParams:{
                page:1,
                size:21,
                total:0,
            },
            dataList:[],
        };
    },
    computed:{
        likeColorList(){
            return this.$store.state.myLike.color;
        },
    },
    watch:{
        activeIndex(){
            this.getData();
        },
    },
    created(){
        this.getData();
    },
    methods:{
        getData:debounceFn(function(){
            this.loading = true;
            this.$Api.getColorList({
                ...this.queryParams,
                order:this.optionList[this.activeIndex].value,
            }).then((res)=>{
                this.dataList = res.data;
            }).catch(({msg}) =>{
                this.$message.error(msg);
            }).finally(()=>{
                this.loading = false;
            });
            simpleRoll();
        },300),
    },
}
</script>
<style lang="scss" scoped> 
.color-view{
    width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-gap: 35px;
    grid-template-rows: min-content min-content 1fr;
    grid-template-areas: "one one" "two three"  "two four";
    grid-template-columns: 1fr 250px;
    grid-auto-flow:row dense;
    font-size: 1.5rem;
    padding-top: 35px;
    .one{
        height: fit-content;
        grid-area: one;
        .tab-list{
            width: 100%;
            border: 1px solid var(--border-color);
            background-color: transparent;
            >.item{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 7px 0;
                cursor: pointer;
                font-size: 17px;
                color: #7e7e7e;
            }
            >.active-item{
                color: #1e80ff;
                font-weight: bold;
            }
        }
    }
    .two{
        height:fit-content;
        grid-area: two;
        position: relative;
        >.none{
            width:100%;
            padding: 30px 0;
            margin-bottom:35px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9;
            i{
                font-size: 2.5rem;
            }
        }
        >.content{
            display: grid;
            grid-gap:15px;
            grid-template-columns: 1fr 1fr 1fr;
        }
        >.bottom{
            margin-top: 35px;
            display: flex;
            justify-content: flex-end;
            position: sticky;
            bottom: 0px;
        }
    }
    .three{
        height: fit-content;
        grid-area:three;
        position: sticky;
        top: 35px;
    }
    .four{
        height: fit-content;
        grid-area:four;
        position: sticky;
        top: 116px;
        >.title{
            font-size: 1.2rem;
            line-height: 1.2rem;
            text-align: left;
            margin-bottom: 10px;
            color: #616194;
            >span{
                font-weight: bold;
                color: #3a3a59;
                margin: 0 5px;
            }
        }
        >.content{
            display: grid;
            grid-gap:10px;
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }
}
</style>

